<template>
  <div class="com-search-input">
    <el-input v-model="searchValue" size="large" :placeholder="placeholder" clearable @input="sendValue" />
    <div class="btn-search" @click="search">搜索</div>
  </div>
</template>
<script setup lang="ts">
import {defineComponent, ref} from "vue";

const props = defineProps({
  placeholder: {
    type: String,
    default: () => ''
  }
})
const emit = defineEmits(['search', 'send'])
const searchValue = ref('')

function search() {
  emit('search', searchValue.value)
}

function sendValue() {
  emit('send', searchValue.value)
}

defineComponent({name: 'comSearchInput'})
</script>

<style scoped lang="scss">
.com-search-input {
  position: relative;

  :deep(.el-input__wrapper) {
    height: 60px;
    padding: 0;
    border-radius: 10px;
  }

  :deep(.el-input__inner) {
    height: 60px;
    padding-right: 170px;
    padding-left: 20px;
  }

  :deep(.el-input__suffix) {
      padding-right: 180px;
  }

  .btn-search {
    position: absolute;
    right: 0;
    top: 0;
    width: 165px;
    height: 60px;
    padding-left: 85px;
    font-size: 16px;
    line-height: 60px;
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    background: linear-gradient(296deg, #FF4350 0%, #FF4553 35%, #FFADB3 100%);

    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50px;
      display: inline-block;
      width: 20px;
      height: 20px;
      background: url('./assets/search.png') no-repeat center;
      transform: translateY(-50%);
    }
  }
}
</style>
